<template>
    <div class="info">
        <crumbs></crumbs>
        <h1>学生信息录入</h1>
        <el-form label-width="80px" class="label">
            <el-form-item label="学号" class="label">
                <el-input v-model="stu_id" class="input"></el-input>
            </el-form-item>
            <el-form-item label="姓名" class="label">
                <el-input v-model="stu_name" class="input"></el-input>
            </el-form-item>
            <el-form-item label="性别" class="label">
                <el-radio v-model="stu_sex" label="男">男</el-radio>
                <el-radio v-model="stu_sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="籍贯" class="label">
                <el-cascader v-model="stu_jg_value" :options="options" :props="{label: 'name',value: 'name',}" @change="arrChange"></el-cascader>
            </el-form-item>
            <el-form-item label="出生日期" class="label">
                <div class="block">
                        <el-date-picker v-model="stu_date" type="date" placeholder="选择日期"></el-date-picker>
                </div>
            </el-form-item>
            <el-form-item label="男女朋友" class="label">
                <el-input v-model="stu_gbf" class="input"></el-input>
            </el-form-item>
            <el-form-item label="爱好" class="label">
                <div style="height: 250px;width:700px; overflow: hidden;">
                    <div style="border: 1px solid #ccc;">
                        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode"/>
                        <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated"/>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="头像" class="label pic">
                <el-button @click="upLoad">上传图片</el-button>
                <el-button @click="goCamera">拍照上传</el-button>
                <input type="file" @change="getFile" ref="ImgFile" hidden>
                <p>只能上传jpg/png文件，且不超过500kb</p>
                <div><img :src="stu_head_img" alt="" width="150px" height="150px"></div>
            </el-form-item>
        </el-form>
        <el-button type="primary" :plain="true" @click="test">提交信息</el-button>
        <el-button @click="reset">重置</el-button>
    </div>
</template>

<script>
import {enter_info} from '@/utils/studentsInfo.js';
import {info_area} from '@/utils/studentsInfo.js';
import { Message,DatePicker,Cascader } from 'element-ui';
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
    export default {
        data() {
        return {
            stu_id:'',
            stu_name:'',
            stu_sex:'',
            stu_jg:'',
            stu_date:'',
            stu_hobby:'',
            stu_gbf:'',
            stu_head_img:'',
            radio: '',
            value1: '',
            stu_jg_value: [],
            options: [],
            value: '',
            //富文本编辑器
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { },
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'
            initKey:'k'
            }
        },
        methods: {
            async submit(){
                let params = {
                    stu_id:this.stu_id,
                    stu_name:this.stu_name,
                    stu_sex:this.stu_sex,
                    stu_jg:this.stu_jg,
                    stu_date:this.stu_date,
                    stu_hobby:this.editor.getText(),
                    stu_gbf:this.stu_gbf,
                    stu_head_img:this.stu_head_img
                }
                let result = await enter_info({
                    method:'post',
                    url:'/student_info',
                    params,
                    headerType:'form'
                });
                    console.log(result);
                    this.stu_id = '';
                    this.stu_name = '';
                    this.stu_sex = '';
                    this.stu_jg = '';
                    this.stu_date = '';
                    this.stu_hobby = '';
                    this.stu_gbf = '';
                    this.stu_head_img = '';
                    this.stu_jg_value = '';
            },
            open2() {
                Message({
                    message: '提交成功！',
                    type: 'success',
                });
            },
            open4() {
                Message.error('请填写完整！');
            },
            test(){
                if(this.stu_id == '' && this.stu_name == '' && this.stu_sex == '' && this.stu_jg == '' && this.stu_date == '' && this.stu_hobby == '' && this.stu_gbf == '' && this.stu_head_img == ''){
                    this.open4();
                    
                }else{
                    this.open2();
                    this.submit();
                }
            },
            arrChange(value){
                console.log(value);//得到的数据是数组 要变成字符串提交
                this.stu_jg = value.join('-');//用指定的分隔符将数组每一项拼接为字符串
                console.log(this.stu_jg);
            },
            onCreated(editor) {
                this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
            },
            getFile(){
                let that = this;
                console.log(this.$refs.ImgFile.files[0]);
                let f = this.$refs.ImgFile.files[0];
                let fr = new FileReader();
                fr.readAsDataURL(f);
                fr.onload = function(){
                    that.stu_head_img = fr.result;
                }
            },
            upLoad() {
            // 点击该按钮相当于点击input
            this.$refs.ImgFile.click();
            },
            goCamera(){
                this.$router.push('photoupload')
            },
            reset(){
                
            }
        },
        components:{
            'el-date-picker':DatePicker,
            'el-cascader':Cascader,
            Editor,
            Toolbar,
        },
        async mounted(){
            let result = await info_area();
            console.log(result);
            this.options = result;
            this.stu_head_img = this.$route.query.ImageSrc;
        },
        beforeDestroy() {
            const editor = this.editor
            if (editor == null) return
            editor.destroy() // 组件销毁时，及时销毁编辑器
    }
    }
</script>

<style scoped>
.el-button.el-button--primary.is-plain{
    width: 200px;
}
.input{
    width: 300px;
}
.label{
    width: 400px;
}
h1{
    text-align:center;
    font-size:20px;
    color:black;
}
.info{
    position:relative;
}
.pic{
    position: absolute;
    left:500px;
    top:50px;
}
</style>